<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>上传证件</title>
  	<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
	<link rel="stylesheet" href="__INDEX__/css/style.css" />
	<link rel="stylesheet" href="__INDEX__/css/mall.css" />	
	<style type="text/css">
		#sfz_pic{position: relative;}/*opacity: 0;*/
		 .upload,.upload1{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
		#dp_pic{position: relative;}
		 .upload2{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
		#yyzz_pic{position: relative;}
		 .upload3{position: absolute;top: 5%;left: 6%;height: 100%;width: 100%;opacity: 0;}
		#qt_pic{position: relative;}
		 .upload4{position: absolute;top: 5%;left: 6%;height: 100%;width: 100%;opacity: 0;}
		.renz_box{width: 94%; margin-top: 10px; padding-bottom: 0px;}
		.renz_box li{background: #fff7f1; border: 1px solid #FE9956; border-radius: 10px; color: #666666;}
		.renz_box li:last-child{margin-bottom: 10px;}
		.sqrz_bt{font-size: 14px; text-align: center; padding-top: 20px; color: #666666; padding: 15px 3% 0;}
		.mui-input-group:after{height: 0;}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="JavaScript:history.go(-1)"></a>
	    <h1 class="mui-title">商家认证 </h1>
	</header>
	<div class="mui-content " style="background: #fff;">
			<canvas width="500" height="800" id="canvas" style="display: none;"></canvas>
	   	<div class="gerenzl_nr">
	   		 <form class="mui-input-group gerenzl_group">
				<ul class="renz_box clearfix">
		    		<li>
		    			<div class="renz_img " id="yyzz_pic" >
		    				<input type="hidden" name="card1" id="card1" value="{$qy.ids_pic1}"/>
		    				<input type="file" id="upload1" class="upload1" value="选择图片文件" multiple />
		    				<span><img class='img_1' id='img_list' src="__INDEX__/images/renz.jpg"></span>
		    			</div>
		    			<div>上传身份证正面照片</div>
		    		</li>
		    		<li>
		    			<div class="renz_img " id="yyzz_pic" >
		    				<input type="hidden" name="card2" id="card2" value="{$qy.ids_pic2}"/>
		    				<input type="file" id="upload2" class="upload1" value="选择图片文件" multiple />
		    				<span><img class='img_4' id='img_list' src="__INDEX__/images/renz2.jpg"></span>
		    			</div>
		    			<div>上传身份证反面照片</div>
		    		</li>
		    		
		    		<li id="yy_pic" style="{if $qy['agent_type']==2}display: none;{/if}">
		    			<div class="renz_img" id="qt_pic">	  
		    				<input type="hidden" name="card3" id="card3" value="{$qy.license_pic}"/>
		    				<input type="file" id="upload3" class="upload" value="选择图片文件" multiple />
		    				<span><img class='img_2' id='img_list' src="__INDEX__/images/renz5.jpg"></span>	    				
		    			</div>
		    			<div>上传营业执照照片</div>
		    		</li>
		    		
		    		<li>
		    			<div class="renz_img" id="qt_pic">	  
		    				<input type="hidden" name="card4" id="card4" value="{$qy.bank_pic}"/>
		    				<input type="file" id="upload4" class="upload" value="选择图片文件" multiple />
		    				<span><img class='img_3' id='img_list' src="__INDEX__/images/renz4.jpg"></span>	    				
		    			</div>
		    			<div>上传银行卡正面照片</div>
		    		</li>
		    		<li>
		    			<div class="renz_img" id="qt_pic">	  
		    				<input type="hidden" name="card5" id="card5" value="{$qy.door_pic}"/>
		    				<input type="file" id="upload5" class="upload" value="选择图片文件" multiple />
		    				<span><img class='img_3' id='img_list' src="__INDEX__/images/renz6.jpg"></span>	    				
		    			</div>
		    			<div>上传门头照</div>
		    		</li>
		    		<li>
		    			<div class="renz_img" id="qt_pic">	  
		    				<input type="hidden" name="card6" id="card6" value="{$qy.indoor_pic}"/>
		    				<input type="file" id="upload6" class="upload" value="选择图片文件" multiple />
		    				<span><img class='img_3' id='img_list' src="__INDEX__/images/renz7.jpg"></span>	    				
		    			</div>
		    			<div>上传内景</div>
		    		</li>
		    	</ul>
			</form>
			
			 	
	   	</div>
	<button class="qiany_btn" type="button">提交</button
	</div>
	
	
</body>
</html>
{include file="public/footer" /}
	<script>
		$(".qiany_btn").click(function(){
	
		if($("input[name='card1']").val()==''||$("input[name='card2']").val()==''||$("input[name='card4']").val()==''||$("input[name='card5']").val()==''){
			layer.msg("请上传好相关证件");
			return;
		}
		$.ajax({
				type: 'post',
				url: 'step6',
				data: {
					ids_pic1:$("input[name='card1']").val(),
					ids_pic2:$("input[name='card2']").val(),
					license_pic:$("input[name='card3']").val(),
					bank_pic:$("input[name='card4']").val(),
					door_pic:$("input[name='card5']").val(),
					indoor_pic:$("input[name='card6']").val(),
					state:2
				},
				success: function(data) {
						layer.msg(data.msg, {
						  icon: 1,
						  time: 1500 //2秒关闭（如果不配置，默认是3秒）
						}, function(){
							location.href = "{:url('index')}";
						});
				}
			})
	

	})

		$(function () {
				$('#upload1').on('change', function() {
					readFile1(this,"card1",1);
				});
				$('#upload2').on('change', function() {
					readFile1(this,"card2",1);
				});
				$('#upload3').on('change', function() {
					readFile1(this,"card3",1);
				});
				$('#upload4').on('change', function() {
					readFile1(this,"card4",1);
				});
				$('#upload5').on('change', function() {
					readFile1(this,"card5",1);
				});
				$('#upload6').on('change', function() {
					readFile1(this,"card6",1);
				});
			});
/**
 * 上传图片
 * name 存储图片form元素id
 * length 上传张数
 */
function readFile1(input, name, length) {
	var img_list = $(input).parent().find('span').find("img");
	if(input.files && input.files[0]) {
			var reader = new FileReader();
	   		var AllImgExt="image/jpg|image/jpeg|image/png|image/bmp";  
            var extName = input.files[0].type.toLowerCase();//（把路径中的所有字母全部转换为小写）          
            if(AllImgExt.indexOf(extName+"|")==-1)          
            {  
                ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;  
                alert(ErrMsg);  
                return false;  
            }  
		var fd = new FormData();
		  var sendData;
		for(var i = 0; i < input.files.length; i++) {
			var reader = new FileReader();
			reader.readAsDataURL(input.files[i]);
				reader.onload = function (event) {
				    var img = new Image();
				    img.onload = function () {
				    	var canvas = document.createElement("canvas"); 
				    	canvas.width=500;
				    	canvas.height=500*img.height/img.width;
							var ctx = canvas.getContext('2d'); 
							ctx.clearRect(0, 0, canvas.width, canvas.height); 
                            ctx.drawImage(img, 0, 0, 500,500*img.height/img.width);
                            var newImageData=canvas.toDataURL('image/jpeg',0.8);
					        sendData = newImageData.replace("data:"+'image/jpeg'+";base64,",'');
				        	$.post("upload1",{value:sendData},function(data){  
	                            if(data.code == '200'){  
	                                $("#"+name).val(data.url);
									img_list.attr("src",data.url);
	                            }else{  
	                                layer.msg(data.msg);
	                            }  
                    		}); 
					}
				    img.src = reader.result;
           		}
			
		}
		
	} else {
		alert("抱歉，你的浏览器不支持 FileReader");
	}
}

	</script>
